<template>
  <div class="food-content-box restaurant-list-box">
    <el-breadcrumb separator="/" class="page-title">
      <!--<el-breadcrumb-item :to="{ path: '@/devlopmentList' }">{{$t('m.DeveloperAdvertisement')}}</el-breadcrumb-item>-->
      <el-breadcrumb-item>{{$t('m.Restaurants')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-box container-padding">
      <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="searchForm"  class="form-min-width">
        <div class="container-box label-style">
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Status')">
                <el-select  style="width: 200px" v-model="searchForm.status" placeholder="" clearable>
                  <el-option v-for="rg in status" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  style="width: 200px" :label="$t('m.Restaurant')">
                <el-input v-model="searchForm.name"></el-input>
              </el-form-item>
              <el-form-item :label="$t('m.Region')">
                <el-select  style="width: 200px" v-model="searchForm.regionId" placeholder="" @change="getTownships($event)" clearable>
                  <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('m.Township')">
                <el-select  style="width: 200px" v-model="searchForm.townshipId" placeholder="" clearable>
                  <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                </el-select>
              </el-form-item>
              <span style="display:inline-block;margin-top:32px;">
                <el-button type="warning" @click="getList" size="medium">{{$t('m.Search')}}</el-button>
                <el-button type="primary" @click="addNewRestaurant" size="medium">{{$t('m.New')}}<i class="el-icon-plus el-icon--right"></i></el-button>
              </span>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <!--表格-->
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%;margin-top:20px;">
        <!--<el-table-column-->
          <!--type="selection"-->
          <!--width="55">-->
        <!--</el-table-column>-->
        <!--Property-->
        <el-table-column
          prop="Activity"
          label="Activity"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toPage(scope.row.id, '/activity')">View</el-button>
          </template>
        </el-table-column>
        <!--Discount-->
        <el-table-column
          prop="Discount"
          label="Discount"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toPage(scope.row.id, '/discount')">Discount</el-button>
          </template>
        </el-table-column>

        <!--Block booking-->
        <el-table-column
          prop="Blockbooking"
          label="Block booking"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toPage(scope.row.id, '/blockBooking')">Block booking</el-button>
          </template>
        </el-table-column>
        <!--Edit-->
        <el-table-column
          prop="Edit"
          label="Edit"
          align="center"
          min-width="80">
          <template slot-scope="scope">
            <!--<el-button size="mini" width="40"  @click="editRestaurant(scope.id)">{{$t('m.Edit')}}</el-button>-->
            <el-button type="text" size="small" @click="editRestaurant(scope.row.id)">{{$t('m.Edit')}}</el-button>
          </template>
        </el-table-column>
        <!--ID-->
        <el-table-column
          prop="ID"
          label="ID"
          align="center"
          min-width="80">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.id}}</div>
          </template>
        </el-table-column>
        <!--Status-->
        <el-table-column
          prop="Status"
          label="Status"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{getStatusItem(scope.row.status)}}</div>
          </template>
        </el-table-column>
        <!--Restaurant-->
        <el-table-column
          prop="Restaurant"
          label="Restaurant"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <!--Region-->
        <el-table-column
          prop="Region"
          label="Region"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.region}}</div>
          </template>
        </el-table-column>
        <!--Township-->
        <el-table-column
          prop="Township"
          label="Township"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.township}}</div>
          </template>
        </el-table-column>
        <!--Street-->
        <el-table-column
          prop="Street"
          label="Street"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.street}}</div>
          </template>
        </el-table-column>
        <!--Phone-->
        <el-table-column
          prop="Phone"
          label="Phone"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.phone}}</div>
          </template>
        </el-table-column>
        <!--Cuisine-->
        <el-table-column
          prop="Cuisine"
          label="Cuisine"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.cuisine}}</div>
          </template>
        </el-table-column>
        <!--Cover photo-->
        <el-table-column
          prop="Coverphoto"
          label="Cover photo"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes" v-if="scope.row.coverPhoto">1</div>
            <div class="list-notes" v-else>0</div>
            <!--<img v-if="scope.row.coverPhoto" :src="scope.row.coverPhoto" alt="" style="max-height:80px;max-width:80px;margin-top:5px;"/>-->
          </template>
        </el-table-column>
        <!--Dish photo-->
        <el-table-column
          prop="Dishphoto"
          label="Dish photo"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.dishPhotoCount}}</div>
          </template>
        </el-table-column>
        <!--Menu photo-->
        <el-table-column
          prop="Menu photo"
          label="Menu photo"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.menuPhotoCount}}</div>
          </template>
        </el-table-column>
        <!--Ambience photo-->
        <el-table-column
          prop="Ambiencephoto"
          label="Ambience photo"
          align="center"
          min-width="150">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.ambiencePhotoCount}}</div>
          </template>
        </el-table-column>
        <!--Notes-->
        <el-table-column
          prop="Notes"
          label="Notes"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.notes}}</div>
          </template>
        </el-table-column>
        <!--Created Date-->
        <el-table-column
          prop="CreatedDate"
          label="Created Date"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getDate(scope.row.createDate)}}</div>
          </template>
        </el-table-column>
        <!--Created By-->
        <el-table-column
          prop="CreatedBy"
          label="Created By"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.createBy}}</div>
          </template>
        </el-table-column>
        <!--Updated Date-->
        <el-table-column
          prop="UpdatedDate"
          label="Updated Date"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getDate(scope.row.updateDate)}}</div>
          </template>
        </el-table-column>
        <!--Updated By-->
        <el-table-column
          prop="UpdatedBy"
          label="Updated By"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.updateBy}}</div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block" style="margin-top: 15px;text-align: center;">
        <el-pagination
          @size-change="handleChangeSize"
          @current-change="handleChangePage"
          :current-page="pageData.pageNo"
          :page-size="pageData.pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-count="pageInfo.totalPages"
          :total="pageInfo.totalCount"
          layout="total, prev, pager, next, jumper, sizes">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { searchResList } from '../../api/mgc_api'
  // 英语JSON
  import regions from '@/json/region'
  import townships from '@/json/township'
  import status from '@/json/status'
  // 缅甸语JSON
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_status from '@/mmJson/status'
  export default {
    name: 'Restaurant',
    data () {
      return {
        // 表单字段
        townships: [],
        searchForm: {
          // 表单数据必填字段
          status: null,
          regionId: null,
          townshipId: null,
          name: null,
        },
        tableData: [],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
      }
    },
   computed: {
     regions() {
       if (this.$store.state.localLang == 'MM') {
         return mm_regions
       } else {
         return regions
       }
     },
     status() {
       if (this.$store.state.localLang == 'MM') {
         return mm_status
       } else {
         return status
       }
     },
   },
    methods: {
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = null

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getStatusItem (it) {
        let str = ''
        this.status.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      addNewRestaurant() {
        this.$router.push('newRestaurant')
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
        // [{row当前所有数据，developmentId}]
      },
      handleChangeSize (val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage (val) {
        this.pageData.pageNum = val
        this.getList()
      },
      getDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var ts = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
        return ts
      },
      editRestaurant (id) {
        this.$router.push({
          path: '/newRestaurant',
          query: {
            id: id
          }
        })
      },
      toPage (id, route) {
        this.$router.push({
          path: route,
          query: {
            id: id
          }
        })
      },
      getList () {
        this.tableLoading = true
        searchResList(Object.assign(this.searchForm, this.pageData))
      .then((res) => {

            // this.showToast(res.data.errorID)
            // if (res.data.errorID === 100004) {
            //   this.$router.push('/login')
            //   return
            // }
            let data = res
            this.tableData = data.data.list
            // 分页信息配置
            this.pageInfo.totalPages = data.data.pages
            this.pageInfo.totalCount = data.data.total
            // 清除loading 状态
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
          .catch((error) => {
            // this.showToast(error.errorID)
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
      },
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style>
  .restaurant-list-box .el-table td {
    padding:0!important;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }
  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }
  .list-notes{
    text-align: center;
    display: block;
  }
</style>
